<template>
  <div class="container column">
    <div class="container-body">
      <template v-if="user.roletype === 99">
        <xy-admin></xy-admin>
      </template>
      <!-- #region 客户、灵工 -->
      <template v-else-if="user.roletype === 3">
        <xy-merchant></xy-merchant>
      </template>
      <!-- #endregion -->
      <!-- #region 税务部门 -->
      <template v-else-if="user.roletype === 4">
        <xy-tax></xy-tax>
      </template>
      <!-- #endregion -->
      <!-- #region 代理商 -->
      <template v-else-if="user.roletype === 5">
        <xy-agent></xy-agent>
      </template>
      <!-- #endregion -->
      <!-- #region 代理商 -->
      <template v-else-if="user.roletype === 6">
        <xy-default></xy-default>
      </template>
      <!-- #endregion -->
      <!-- #region 客户经理 -->
      <template v-else-if="user.roletype === 51">
        <xy-manager></xy-manager>
      </template>
      <!-- #endregion -->
    </div>
  </div>
</template>

<script>
import Admin from "./index/Admin";
// import Defaul from "./index/Defaul";
import Merchant from "./index/Merchant.vue";
import Tax from "./invoice/InvoiceRecord.vue";
import Default from "./index/Default.vue";
export default {
  components: {
    "xy-admin": Admin,
    "xy-merchant": Merchant,
    "xy-agent": Default,
    "xy-manager": Default,
    "xy-tax": Tax,
    "xy-default": Default,
  },
  data() {
    return {
      user: null,

    };
  },
  created() {
    let userStr = window.sessionStorage.getItem("user");
    this.user = JSON.parse(userStr);
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.container {
  // height: 60%;

  .container-body {
    padding-bottom: 2rem;
    flex-basis: 100%;
    background: url(../assets/static/img/pic_bg.png) right bottom no-repeat;
    background-size: contain;
    background-origin: content-box;
  }

  // .row {
  //   .col-1 {
  //     & + .col-1 {
  //       margin-left: 1rem;
  //     }
  //   }
  // }
}
</style>
